<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" width="180" />
    <el-table-column prop="sex" label="性别" width="180" />
    <el-table-column prop="birth" label="出生日期" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          style="margin-right: 10px"
          type="primary"
          @click="handleemit(scope)"
        >
          修改
        </el-button>
        <el-button type="danger" @click="handleDelete(scope.$index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const formLabelWidth = "140px";

const handleDelete = (index) => {
  console.log("删除数据", index);
  tableData.splice(index, 1);
  console.log(tableData);
  location.reload();
  this.$router.go(0);
};
const handleemit = (row) => {
  console.log("修改数据", row);
};

const tableData = [
  {
    name: "张三",
    age: 22,
    sex: "男",
    birth: "2016-05-03",
    address: "杭州",
  },
  {
    name: "李四",
    age: 26,
    sex: "女",
    birth: "2016-05-02",
    address: "西安",
  },
  {
    name: "王五",
    age: 23,
    sex: "女",
    birth: "2016-05-04",
    address: "深圳",
  },
  {
    name: "赵六",
    age: 25,
    sex: "男",
    birth: "2016-05-01",
    address: "北京",
  },
  {
    name: "王芳",
    age: 25,
    sex: "女",
    birth: "2016-05-01",
    address: "成都",
  },
  {
    name: "小李",
    age: 25,
    sex: "男",
    birth: "2016-05-01",
    address: "西安",
  },
  {
    name: "小红",
    age: 25,
    sex: "女",
    birth: "2016-05-01",
    address: "北京",
  },
  {
    name: "小刘",
    age: 25,
    sex: "男",
    birth: "2016-05-01",
    address: "南京",
  },
];
</script>

<style>
</style>